<template>
  <div class="grant">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="span">工资发放</span>
      </div>
      <el-button
        type="primary"
        size="small"
        @click="$router.push('/home/addgrant')"
        >发放工资</el-button
      >
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="date" label="序号" width="100" type="index">
        </el-table-column>
        <el-table-column prop="name" label="工资单" width="200">
        </el-table-column>
        <el-table-column prop="payMonth" label="薪资月份" width="150">
          <template slot-scope="scope">
            {{ new Date(scope.row.payMonth) | months }}
          </template>
        </el-table-column>
        <el-table-column label="已发放" width="100">
          <template slot-scope="scope">
            {{
              scope.row.xzStaff.reduce((old, now) => {
                if (now.grant == 0) {
                  return (old += 1);
                }
                return old;
              }, 0)
            }}
          </template>
        </el-table-column>
        <el-table-column label="未确认" width="100">
          <template slot-scope="scope">
            {{
              scope.row.xzStaff.reduce((old, now) => {
                if (now.confirm == 1) {
                  return (old += 1);
                }
                return old;
              }, 0)
            }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="员工反馈" width="100">
          0
        </el-table-column>
        <el-table-column prop="time" label="发放时间" width="200">
          <template slot-scope="scope">
            {{ new Date(scope.row.time) | date }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <el-button @click="handleClick" type="text" size="small"
              >前往发放</el-button
            >
            <!-- <el-button type="text" size="small">详情</el-button> -->
            <el-button type="text" size="small" @click="details(scope.row)"
              >工资单详情</el-button
            >
            <el-button type="text" size="small" @click="delPay(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "APIGrant",

  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [],
    };
  },

  mounted() {
    this.getxzDetails();
    this.getPays();
  },

  methods: {
    handleClick() {
      this.$router.push("/home/addgrant");
    },
    details(row) {
      console.log(row);
      this.$router.push("/home/detail");
      sessionStorage.setItem("xzStaff", JSON.stringify(row));
    },
    async delPay(row) {
      let {
        data: { code, msg },
      } = await axios.delete("/xz/delPays?id=" + row._id);
      if (code == 200) {
        this.$message.error(msg);
        this.getPays();
      }
    },
    async getPays() {
      let { data } = await axios.get("/xz/getpays");
      this.tableData = data;
      console.log(data, "000000");
    },
    async getxzDetails() {
      let { data } = await axios.get("/xz/getrever");
      console.log(data);
    },
  },
};
</script>

<style lang="scss" scoped>
.span {
  font-weight: bold;
  font-size: 18px;
}
.el-pagination {
  float: right;
  height: 50px;
  line-height: 80px;
  padding: 0 60px;
  margin-top: 30px;
}
.box-card {
  width: 100%;
}
</style>